嗨大家好
我們昨天終於把HTML告一段落了，不知道大家對各種HTML標籤有沒有越來越熟悉了呢？
如果還不熟悉的也沒有關係，因為接下來我們要開始學習CSS，使用CSS是需要建立在HTML的基礎上進行加工，所以大家可以再次進行複習。
讓我們開始吧。
一樣，讓我們先來看看網路上是如何說明的：
階層式樣式表（英語：Cascading Style Sheets，縮寫：CSS；又稱串樣式列表、級聯樣式表、串接樣式表、階層式樣式表）是一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言。
CSS不僅可以靜態地修飾網頁，還可以配合各種手稿語言動態地對網頁各元素進行格式化。CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支援幾乎所有的字型字號樣式，擁有對網頁對象和模型樣式編輯的能力。
跟當初的 HTML 一樣，非常文言，沒關係，讓我們翻成白話文來看看。
CSS (Cascading Style Sheets) 是用來幫我們的 HTML 添加樣式的電腦語言。我們前面11天的 HTML 頁面都是黑白且靜態的。CSS就是來美化他的。
那讓我們快點開始吧，首先讓我們在鐵人賽的資料夾底下建立一個 day12-認識CSS.html。
並把基本的 HTML架構建立好(忘記了看day04)後，在 <body> 中放個 <div> 吧。
我們先來講講三種寫css的方式(當然實際上有更多種，但我們講比較基本的三種，其中有兩種我們在之前的HTML教學中有使用過)。
1.行內樣式：直接寫在標籤裡面。有印象我們在day10要分辨block與inline的時候用過嗎？讓我們來複習一下：
<h1 style="border:3px solid blue">中秋月餅大特價一盒只要199</h1>
像這樣直接用 style="" 寫在標籤裡的就是行內樣式。
2.內部樣式表：直接寫在html檔案的 <head> </head> 裡面。還記得 <head> </head> 的功用嗎？快速複習一下， head 裡面的內容是給瀏覽器看的，不是給人看的。
所以我們想想看，今天我要讓「中秋月餅大特價一盒只要199」變紅色，這個變紅色的指令，是要給誰看的？是給瀏覽器看對吧？瀏覽器看了指令，就可以把字變成紅色。人要看的不是「變紅色的指令」，而是「已經變紅色的字」。所以，要給瀏覽器看，那就是寫在 <head> </head> 合理吧？
怎麼做呢？
在 <head> </head> 裡面包一個 <style> </style> 告訴瀏覽器，這裡面都會是我的CSS。你去讀這裡面的指令，再按照指令顯示出該有的樣式。(至於該怎麼寫會在後面說明)。
<head>
<style>
h1{
border:3px solid blue
}
</style>
</head>
<body>
<h1>中秋月餅大特價一盒只要199</h1>
</body>
3.外部樣式表：了解過「內部樣式表」是寫在HTML檔案裡面，那我們可以推論「外部樣式表」就是把CSS寫在別的檔案上，再引用進來。怎麼做呢？
讓我們先在鐵人賽底下建立一個css資料夾，裡面再建立一個day12.css的檔案(注意，副檔名是.css)。所以呢我們的css程式碼都會寫在這支檔案。然後我們要從原本的檔案 (day12-認識CSS.html) 把 day12.css 引入就可以了。如何引入呢？
在 <head> </head> 裡面包一個 <link rel="stylesheet" href=""> 告訴瀏覽器，我這個 html 檔案要連結另一個檔案。<link> 裡面有兩個屬性，rel="stylesheet" 是在描述現在檔案 (day12-認識CSS.html) 與連結檔案 (day12.css) 的關係， href="" 要填連結或是路徑(忘記的請回去複習day06 <a> 標籤的屬性)。忘記路徑怎麼計算的麻煩day08。
我們剛剛建立了css資料夾裡面的day12.css，算一下路徑(不管絕對路徑或相對路徑，只要能連到的就是好路徑)。
經過計算，我的是 href="../css/day12.css"
day12-認識CSS.html
<head>
<link rel="stylesheet" href="../css/day12.css">
</head>
<body>
<h1>中秋月餅大特價一盒只要199</h1>
</body>
day12.css
h1{
border:3px solid blue
}
要如何確定路徑正確呢？用live server看，有出現邊框就是路徑正確囉。
大家有順利連到嗎？
我們明天要開始學習各種樣式囉，明天見。
iThome鐵人賽
看影片追技術